<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0 , maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>HTML 仿 PS 调色板</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div id="color-container" class="sunui-color-container">
      <div id="color-area" class="sunui-color-area">
        <span id="color-area-point" class="sunui-color-area-point"></span>
        <span id="color-area-layer" class="sunui-color-area-layer"></span>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="sunui-color-index">
        <div class="sunui-color-red2pink"></div>
        <div class="sunui-color-pink2blue"></div>
        <div class="sunui-color-blue2cyan"></div>
        <div class="sunui-color-cyan2green"></div>
        <div class="sunui-color-green2yellow"></div>
        <div class="sunui-color-yellow2red"></div>
        <div id="color-bar" class="sunui-color-bar-container">
          <div class="sunui-color-bar sunui-color-bar-left"></div>
          <div class="sunui-color-bar sunui-color-bar-right"></div>
        </div>
        <div id="color-index-layer" class="sunui-color-index-layer"></div>
      </div>
      <div class="sunui-color-rgb-container">
        <div class="sunui-color-show-container">
          <div class="sunui-color-text sunui-color-text-new">新的</div>
          <div id="show-new" class="sunui-color-show sunui-color-show-new"></div>
          <div id="show-current" class="sunui-color-show sunui-color-show-current"></div>
          <div class="sunui-color-text sunui-color-text-current">当前</div>
          <div id="web-safe" class="sunui-color-web-safe"><div></div></div>
        </div>
        <div class="sunui-color-rgb sunui-color-r"><span>R:</span><input id="rgb-r" type="text" maxlength="3" /></div>
        <div class="sunui-color-rgb sunui-color-g"><span>G:</span><input id="rgb-g" type="text" maxlength="3" /></div>
        <div class="sunui-color-rgb sunui-color-b"><span>B:</span><input id="rgb-b" type="text" maxlength="3" /></div>
        <div class="sunui-color-0xrgb"><span>#</span><input id="rgb0x" type="text" maxlength="6" /></div>
      </div>
      <div id="color-sure" class="sunui-color-sure">确定</div>
    </div>

    <script src="./js/index.js"></script>
  </body>
</html>
